<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        <el-date-picker
            v-model="value2"
            type="date"
            @change="kais"
            :picker-options="pickerOptions"
            placeholder="选择日期">
        </el-date-picker>
      </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
  data(){
    return{
      activeName: 'first',
      value1: '',
      value2: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date();
        },
      },
    }
  },
  methods: {
    handleClick(tabs, event){

    },
    kais (value) {
      function daysBetweenDates(date1, date2) {
        // 确保date1和date2是Date对象
        const dateOne = new Date(date1);
        const dateTwo = new Date(date2);
        // 计算时间差
        const difference = dateTwo - dateOne;
        // 将毫秒转换为天
        const daysBetween = Math.ceil(difference / (1000 * 3600 * 24));
        return daysBetween;
      }
      if (this.value1 === '' || this.value1 === null) {
        this.value2 = ''
        this.$message({
          type: 'warning',
          message: '请选择value1',
          center: true,
        });
      } else {
        const today = new Date(value)
        const targetDate = new Date(this.value1)
        if (daysBetweenDates(today, targetDate) < 0) {
          this.value2 = ''
          this.$message({
            type: 'warning',
            message: '当前时间应小于等于value1',
            center: true,
          });
        } else {
          this.value2 = value
        }
      }
    }
  }
}
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

::v-deep .el-tabs__item {
  color: green;
  opacity: 0.5;
}

/**选中 */
::v-deep .el-tabs__item.is-active {
  color: red;
  opacity: 1;
}

/**悬浮 */
::v-deep .el-tabs__item:hover {
  color: red;
  cursor: pointer;
  opacity: 1;
}


/*去下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
  background-color: red;
}
</style>
